<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        /* 下面我们会解释这些 class 是做什么的 */
        .h1-enter-active,
        .h1-leave-active {
            transition: opacity 0.5s ease;
            /* animation: ; */
        }

        .h1-enter-from,
        .h1-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click="isShow = !isShow">切换显示</button>
        <!-- 
            transition 本身不是直接做动画，而是帮我们自动添加了对应的 class 
            需要我们自己操作这些 class 来实现我们自己需要的动画或者过度
            name 属性是用来设置 class 名称以什么开头,如果该属性不设置，那么会使用 v 开头
            appear 定义初始动画，运行时会立即执行一次动画效果
            transition 组件内部只能有一个根元素
         -->
        <!-- <transition name="h1" appear>
            <h1 v-if="isShow"> 你笑起来真好看 </h1>
            <h1 v-if="isShow"> 你笑起来真好看 </h1>
            <h1 v-if="isShow"> 你笑起来真好看 </h1>
        </transition> -->



        <!-- 动画组 -->
        <transition-group name="h1" appear @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter"
            @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave"
            @after-leave="onAfterLeave" @leave-cancelled="onLeaveCancelled">
            <h1 v-if="isShow"> 你笑起来真好看 </h1>
            <h1 v-if="isShow"> 你笑起来真好看 </h1>
            <h1 v-if="isShow"> 你笑起来真好看 </h1>
        </transition-group>




        <!-- 
            v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

            v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，
            在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

            v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 
            被移除的同时)，在过渡或动画完成之后移除。

            v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

            v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。
                在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。
                这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

            v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被
            添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

         -->

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            // 在元素被插入到 DOM 之前被调用
            // 用这个来设置元素的 "enter-from" 状态
            onBeforeEnter(el) { },

            // 在元素被插入到 DOM 之后的下一帧被调用
            // 用这个来开始进入动画
            onEnter(el, done) {
                // 调用回调函数 done 表示过渡结束
                // 如果与 CSS 结合使用，则这个回调是可选参数
                done()
            },

            // 当进入过渡完成时调用。
            onAfterEnter(el) { },
            onEnterCancelled(el) { },

            // 在 leave 钩子之前调用
            // 大多数时候，你应该只会用到 leave 钩子
            onBeforeLeave(el) { },

            // 在离开过渡开始时调用
            // 用这个来开始离开动画
            onLeave(el, done) {
                // 调用回调函数 done 表示过渡结束
                // 如果与 CSS 结合使用，则这个回调是可选参数
                done()
            },

            // 在离开过渡完成、
            // 且元素已从 DOM 中移除时调用
            onAfterLeave(el) { },

            // 仅在 v-show 过渡中可用
            onLeaveCancelled(el) { }

        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>